<template>
    <van-panel title="设置" :class="{'hide': hide}">
        <van-row>
            <van-col :span="4" :offset="1">
                <span>选项</span>
            </van-col>
            <van-col :span="19">
                <section>   
                    <van-radio-group v-model="radio" @change="radioChange">
                        <van-radio name="openApp" style="float: left; margin-right: 30px;">
                            <span>应用</span>
                        </van-radio>
                        <van-radio name="openLink" style="float: left;">
                            <span>链接</span>
                        </van-radio>
                    </van-radio-group>
                </section>
            </van-col>
        </van-row>
        <van-field v-if="radio == 'openApp'"
            v-model="setTemp.link.val"
            clearable
            label="链接"
            placeholder="请输入微应用ID"
        />
        <van-field v-else
            v-model="setTemp.link.val"
            clearable
            label="链接"
            placeholder="请输入有效的访问链接"
        />
        <van-row>
            <van-col :span="4" :offset="1">
                <span>宽度</span>
            </van-col>
            <van-col :span="19">
                <section>   
                    <van-stepper :min='0' :max="300" v-model="setTemp.grid.width"/>
                </section>
            </van-col>
        </van-row>
        <van-row>
            <van-col :span="4" :offset="1">
                <span>高度</span>
            </van-col>
            <van-col :span="19">
                <section>   
                    <van-stepper :min='0' :max="300" v-model="setTemp.grid.height"/>
                </section>
            </van-col>
        </van-row>
        <br>
        <div slot="footer">
            <van-button size="small" @click="setClick">确定</van-button>
        </div>
    </van-panel>
</template>
<script>
export default {
    data() {
        return {
            radio: 'openApp',
            decide: 0,
            hide: false
        }
    },
    props: {
        setTemp: {
            type: Object,
            default(){}
        }
    },
    computed: {
        gridWidth(){
            return this.setTemp.grid.width
        },
        gridHeight(){
            return this.setTemp.grid.height
        }
    },
    watch: {
        gridWidth(){
            if(this.decide > 0){
                this.hide = true;
                this.sleep(800)
            }
            this.decide ++
        },
        gridHeight(){
            if(this.decide > 0){
                this.hide = true;
                this.sleep(800)
            }
            this.decide ++
        }
    },
    methods: {
        async clear(){
            this.decide = 0
        },
        sleep(time){
            return new Promise(resolve => {
                setTimeout(() => {
                    this.hide = false;
                    resolve()
                }, time);
            })
        },
        radioChange(){
            this.setTemp.link.type = this.radio
        },
        setClick(){
            this.decide = 0;
            this.$emit('close')
        }
    }
}
</script>
<style lang="scss" scoped>
section{
    padding: 10px;
}
.hide{
    opacity:0.5;
}
span{
    font-size: 13px;
    line-height: 50px;
}
</style>
